<template>
    <div>
        <div style="margin-top:20px;">
            <el-tooltip :disabled="disabled" effect="dark" placement="right" >
                <h3 slot="content">{{todayDishes.dishesName}}</h3>
                <div slot="content" v-for="di in todayDishes.dishesIngredients " :key="di.id" style="width:150px">
                    <el-row>
                        <el-col :span="15">
                            <p>{{di.ingredientsName}}</p>
                        </el-col>
                        <el-col :span="5">
                            <p>{{di.ingredientsNum}}</p>
                        </el-col>
                        <el-col :span="4">
                            <p>{{di.ingredientsUnit}}</p>
                        </el-col>
                    </el-row>
                </div>

                <el-card class="box-card cardStyle" :body-style="{ padding: '0px' }">

                    <el-image class="imgStyle" :src="todayDishes.dishesImg" fit="cover"></el-image>

                    <el-tag class="tagStyle" :type="tagClassify(todayDishes.dishesTag)" effect="dark" size="mini">
                        {{todayDishes.dishesTag}}
                    </el-tag>

                    <!-- 注：此处 e-image 添加点击事件会使滚动条消失，div作为覆盖层盖在上面完成点击事件--by hui  -->
                    <div style="width: 210px;height: 210px;position: absolute;margin-top:-210px"
                        @click="viewDetails(todayDishes.dishesId);getDishesinfoUser(todayDishes.dishesUser)"></div>

                    <h3 class="h3Style" @click="viewDetails(todayDishes.dishesId);getDishesinfoUser(todayDishes.dishesUser)">
                        {{todayDishes.dishesName}}</h3>


                    <p class="pStyle"><img class="iconStyle" src="../../../assets/good.png"
                            width="18px">{{todayDishes.dishesGoodnum}}</p>

                    <!-- <el-avatar :size="50" src="../../../assets/001.png" style="border:3px solid #BBDDFF">
                <img src="../../../assets/001.png" />
            </el-avatar> -->
                </el-card>

            </el-tooltip>
        </div>
        <DishesInfo ref="dinfo"></DishesInfo>

    </div>
</template>

<script>
    import DishesInfo from "../../share/util/DishesInfo"

    import {
        getInfo,
        checkAttention,
        checkCollect,
        checkGood,
    } from '@/api/accountApi.js';

    import {
        mapState,
        mapGetters
    } from 'vuex'

    export default {
        name: 'Show',
        components: {
            DishesInfo
        },
        data() {
            return {
                disabled: false, //控制提示
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            }
        },
        computed: {
            ...mapState(['menus', 'userInfo']),
            ...mapGetters(['inforMenus', 'getDishesInfo','todayDishes'])
        },
        methods: {
            //Tag判断
            tagClassify(dishesTag) {
                if (dishesTag === '原创') return this.tagtype = 'success'
                if (dishesTag === '范本') return this.tagtype = 'warning'
                if (dishesTag === '翻制') return this.tagtype = 'danger'
            },
            viewDetails(id) {
                this.$refs.dinfo.DishesInfoVisible = true;
                this.$store.commit('selectDishesId', id);
                this.checkTwo();
            },
            getDishesinfoUser(id) {
                getInfo(id).then(resp => {
                    this.$store.commit('getDishesUserInfo', resp.data)
                    checkAttention(this.userInfo.infoId, resp.data.infoId).then(resp => {
                        this.$store.commit('setIsAttention',resp.data)
                    })
                })
            },
            checkTwo() {
                checkCollect(this.getDishesInfo[0].dishesId, this.userInfo.accountId).then(resp => {
                    this.$store.commit('setIsCollect',resp.data)
                })
                checkGood(this.getDishesInfo[0].dishesId, this.userInfo.accountId).then(resp => {
                    this.$store.commit('setIsGood',resp.data)
                })
            }
        },
    }
</script>

<style scoped>
    .cardStyle {
        width: 210px;
        margin-bottom: 30px;
        break-inside: avoid;
    }

    .imgStyle {
        width: 210px;
        height: 210px;
        z-index: 0;
    }

    .tagStyle {
        position: absolute;
        margin-left: -200px;
        margin-top: 10px;
    }

    .h3Style {
        margin-top: 8px;
        height: 25px;
    }

    .pStyle {
        vertical-align: middle;
        font-size: 14px;
        font-weight: 500;
        color: #0090FF;
        margin-top: -5px;
    }

    .iconStyle {
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -3px;
    }
</style>

<style>
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>